@charset 'utf-8';
@function r($px) {
    @return ($px/40) * 1rem;
}

@function half($px) {
    @return ($px/2) * 1px;
}

html,
body {
    header {
        padding: half(48) half(23) half(18);
        a {
            .Back {
                width: half(123);
                height: half(57);
                background-color: #ffffff;
                border-radius: half(20);
                border: solid 1px #ff9344;
                p {
                    font-size: half(26);
                    color: #000;
                    line-height: half(57);
                    text-align: center;
                }
            }
        }
        .classify {
            font-size: half(26);
            text-align: center;
            padding-top: half(16);
        }
        .select {
            width: half(159);
            height: half(56);
            background-color: #ffffff;
            border: solid 1px #ff9344;
            overflow: hidden;
            background-image: url(../img/triangle.jpg);
            background-size: half(32);
            background-repeat: no-repeat;
            background-position: half(100) half(24);
            select {
                width: 100%;
                height: 100%;
                appearance: none;
                -webkit-appearance: none;
                -moz-appearance: none;
                border: none;
                diqplay: block;
                padding-left: half(14);
                background: transparent;
            }
        }
    }
    section {
        .searchBar {
            box-sizing: border-box;
            width: r(266);
            height: r(51);
            border: solid 1px #ff9344;
            overflow: hidden;
            border-radius: half(51);
            margin: auto;
            input[type="search"] {
                width: calc(100% - 38px);
                height: 100%;
                border: none;
                margin-left: half(24);
                vertical-align: top;
            }
            input[type="image"] {
                width: r(30);
                vertical-align: top;
                margin-top: half(9);
            }
        }
        .button {
            width: 100%;
            div {
                width: 100%;
                display: flex;
                justify-content: center;
                button {
                    width: half(125);
                    height: half(64);
                    background-color: #dcdcdc;
                }
                button:not(:last-child) {
                    margin-right: half(4);
                }
            }
        }
        .button_h3 {
            padding-top: half(33);
            padding-bottom: half(14);
            h3 {
                font-size: half(26);
                text-align: center;
            }
        }
        .title,
        .title2 {
            margin-top: r(37);
            padding: 0 half(21) half(38);
            * {
                display: inline-block;
                vertical-align: middle;
            }
            >div:first-child img {}
            >div:first-child span {
                font-size: half(30);
                margin-right: half(8);
            }
            >div:last-child {
                font-size: half(24);
                margin-top: half(11);
                img {
                    width: r(25);
                    padding-left: half(8);
                }
            }
        }
        .title {
            >div:first-child {
                img {
                    width: r(32);
                    margin-right: half(24);
                }
            }
        }
        .title2 {
            >div:first-child {
                img {
                    width: r(41);
                    margin-right: half(17);
                }
            }
        }
        .cate_img {
            padding-left: r(21);
            div:first-child {
                padding-right: r(9);
                img {
                    width: r(280);
                }
            }
            div:nth-of-type(2) {
                img {
                    width: r(420);
                }
            }
            div:nth-of-type(3) {
                img {
                    width: r(195);
                    margin-right: r(14);
                }
            }
            div:nth-of-type(4) {
                img {
                    width: r(211);
                }
            }
        }
        .tuijian{
            display: flex;
            justify-content: space-around;
            div:first-child{
                img{
                    width: r(228);
                }
            }
            div:nth-of-type(2){
                img{
                    width: r(211);
                }
            }
            div:last-child{
                img{
                    width: r(220);
                }
            }
        }
    }
}